import { util } from '@/utils'
import classNames from 'classnames'
import { useState } from 'react'

interface FromProps {
  city: string
  weatherUrl: string
  weatherKey: string
  amapKey: string
  amapSecret: string
}

function SettingComponent(props: any) {
  const { onClose } = props

  const defaultSetting = util.Setting.getSetting()
  const [form, setForm] = useState<FromProps>(defaultSetting)

  /**
   * 输入框事件处理函数
   * @param event 输入框事件
   */
  function handleInputChange(event: any) {
    const { name, value } = event.target
    setForm({ ...form, [name]: value })
  }

  /**
   * 保存设置并关闭弹窗
   */
  function onSave() {
    util.Setting.setSetting(form)
    onClose()
    window.location.reload()
  }
  return (
    <>
      <div className="fixed z-10 inset-0 overflow-y-auto">
        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
          <div className="fixed inset-0 transition-opacity" aria-hidden="true">
            <div className="absolute inset-0 bg-black/50" onClick={onClose}></div>
          </div>
          <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
            &#8203;
          </span>
          <div className={classNames(`inline-block align-bottom rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle md:w-3/5 sm:w-full`, props.className)}>
            <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
              <div className="sm:flex sm:items-start">
                <div className="w-full mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                  <h3 className="text-lg leading-6 font-medium">参数设置</h3>
                  <div className="mt-2">
                    <p className="text-sm text-gray-500">这里是设置页面，你可以在这里设置一些你需要的功能。</p>

                    <form id="setting-form" onSubmit={e => e.preventDefault()} className="w-full mt-4 flex flex-col gap-4">
                      <div className="flex flex-col gap-2">
                        <label className="block text-sm font-medium">默认城市</label>
                        <input type="text" placeholder="请输入默认城市" name="city" value={form.city} onChange={handleInputChange} />
                      </div>
                      <div className="flex flex-col gap-2">
                        <label className="block text-sm font-medium ">
                          天气API
                          <a className="ml-4 text-xs text-blue-500" href="https://openweathermap.org/api" target="_blank" rel="noopener noreferrer">
                            Weather API
                          </a>
                        </label>
                        <input type="text" placeholder="请输入API URL" name="weatherUrl" value={form.weatherUrl} onChange={handleInputChange} />
                        <input type="password" placeholder="请输入API KEY" name="weatherKey" value={form.weatherKey} onChange={handleInputChange} />
                      </div>
                      <div className="flex flex-col gap-2">
                        <label className="block text-sm font-medium">
                          高德地图
                          <a className="ml-4 text-xs text-blue-500" href="https://lbs.amap.com/dev/key/app" target="_blank" rel="noopener noreferrer">
                            去申请
                          </a>
                        </label>
                        <input type="password" placeholder="请输入API KEY" name="amapKey" value={form.amapKey} onChange={handleInputChange} />
                        <input type="password" placeholder="请输入安全密钥" name="amapSecret" value={form.amapSecret} onChange={handleInputChange} />
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div className="px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
              <button
                type="button"
                className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm"
                onClick={onSave}>
                保存
              </button>
              <button
                type="button"
                className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
                onClick={onClose}>
                关闭
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default SettingComponent
